<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.one{
			width: 200px;
			height: 200px;
			background-color: red;
			margin-left: 400px;

/*			相对定位  相对定位不脱标  参考自身位置进行移动  移动后  原本占据的空间不会变  盒子走了  空件还在*/
/*			left: */
/*			right*/
/*			top*/
/*			bottom*/  

			/*position: relative;
			left: 200px;
			top: 200px;*/


			position: absolute;
/*			绝对定位   绝对定位 脱标  绝对定位参考有定位的父级  如果没有  就会一直向上寻找   如果都没有  就会参考浏览器  body  */
			left: 0;
			top: 0;

		}
		.two{
			width: 300px;
			height: 300px;
			background-color: blue;
			margin-left: 400px;
			position: relative;
/*			相对定位对父级影响最小*/
		}

/*		子绝父相*/
		.child{
			width: 100px;
			height: 200px;
			background-color: pink;
			position: absolute;
			right: 0;
			bottom: 0;
/*			左边 距离(有定位父级) body  0px*/

		}

		.three{
			width: 100px;
			height: 100px;
			background-color: skyblue;
			position: fixed;
/*			固定定位  会脱标 浏览器首屏*/
			right: 0;
			bottom: 0;
		}
		body{
			height: 9999px;
		}
	</style>
</head>
<body>

	<div class="one">
		


	</div>


	<div class="two">
		<div class="child"></div>
	</div>

	<div class="three">
		1234566
	</div>


</body>
</html>